<template>
  <div class="table-box">
    <ProTable ref="proTable" title="礼券发放列表" row-key="id" :columns="columns" :request-api="getFoodCouponUserList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDialog('新增', defaultData)">
          新增礼券发放
        </el-button>
        <el-button v-auth="'batchadd'" type="primary" :icon="CirclePlus" @click="openDialog('批量新增', batchData)">
          批量新增礼券发放
        </el-button>
      </template>

      <!-- 去除日期时分秒 -->
      <template #collectionStartDate="{ row }">
        <div>
          {{ row.collectionStartDate?.substring(0, 10) }}
        </div>
      </template>
      <template #collectionEndDate="{ row }">
        <div>
          {{ row.collectionEndDate?.substring(0, 10) }}
        </div>
      </template>
      <template #startDate="{ row }">
        <div>
          {{ row.startDate?.substring(0, 10) }}
        </div>
      </template>
      <template #endDate="{ row }">
        <div>
          {{ row.endDate?.substring(0, 10) }}
        </div>
      </template>

      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)"> 编辑 </el-button>
        <el-button
          v-auth="'stop'"
          type="primary"
          link
          :icon="Delete"
          @click="stopAccount(scope.row)"
          v-if="scope.row.status !== 2"
        >
          {{ scope.row.status === 3 ? "启用" : scope.row.status === 1 ? "停用" : "" }}
        </el-button>
      </template>
    </ProTable>
    <GrantDialog ref="grantDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="couponGrant">
import { ref, onBeforeUpdate } from "vue";
import { useRoute } from "vue-router";
import { Coupon } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import {
  getFoodCouponUserList,
  stopFoodCouponUser,
  createFoodCouponUser,
  editFoodCouponUser,
  createBatchFoodCouponUser
} from "@/api/modules/coupon";
import { getDicData } from "@/api/modules/system";
import GrantDialog from "@/views/marketing/components/GrantDialog.vue";
import { foodCouponUserStatus } from "@/utils/serviceDict";
import { formatDate } from "@/utils/date-formatter";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
const route = useRoute();
const defaultData = {
  distributionDate: formatDate(0, "start", "yyyy-MM-dd"),
  status: 1,
  collectionStartDate: formatDate(0, "start", "yyyy-MM-dd"),
  collectionEndDate: "2099-01-01"
};
const batchData = {
  distributionDate: formatDate(0, "start", "yyyy-MM-dd"),
  collectionStartDate: formatDate(0, "start", "yyyy-MM-dd"),
  collectionEndDate: "2099-01-01",
  count: 1
};
// 表格配置项
const columns: ColumnProps<Coupon.ResFoodCouponUserList>[] = [
  { type: "index", label: "#", width: 60 },
  // {
  //   prop: "distributionDate",
  //   label: "发放日期",
  //   align: "left",
  //   minWidth: 164,
  //   search: {
  //     el: "date-picker",
  //     key: "timeValue",
  //     props: {
  //       type: "datetimerange",
  //       format: "YYYY-MM-DD HH:mm",
  //       valueFormat: "YYYY-MM-DD HH:mm"
  //     }
  //   }
  // },
  {
    sortable: true,
    prop: "typeId",
    label: "礼券类型",
    align: "left",
    minWidth: 110,
    enum: () => getDicData("CouponType"),
    search: { el: "select" },
    fieldNames: { label: "title", value: "value" }
  },
  {
    sortable: true,
    prop: "status",
    label: "使用状态",
    minWidth: 110,
    align: "left",
    enum: foodCouponUserStatus,
    search: { el: "select" }
  },
  { sortable: true, prop: "couponName", label: "礼券名称", minWidth: 150, align: "left" },
  { sortable: true, prop: "couponCode", label: "礼券编码", minWidth: 150, align: "left", search: { el: "input" } },
  {
    sortable: true,
    prop: "nickName",
    label: "会员名称",
    minWidth: 120,
    align: "left",
    isFilterEnum: false,
    search: {
      el: "input",
      key: "content",
      label: "会员"
    }
  },
  { sortable: true, prop: "number", label: "会员卡号", minWidth: 120, align: "left" },
  { sortable: true, prop: "mobile", label: "手机号", minWidth: 120, align: "left", search: { el: "input" } },
  { sortable: true, prop: "collectionTime", label: "领取时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "useTime", label: "使用时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "startDate", label: "礼券有效开始时间", minWidth: 174, align: "left" },
  { sortable: true, prop: "endDate", label: "礼券有效结束时间", minWidth: 174, align: "left" },
  { sortable: true, prop: "collectionStartDate", label: "开始领取时间", minWidth: 164, align: "left" },
  { sortable: true, prop: "collectionEndDate", label: "结束领取时间", minWidth: 164, align: "left" },
  { prop: "operation", label: "操作", width: 150, fixed: "right" }
];

// 停用
const stopAccount = async (params: Coupon.ResFoodCouponUserList) => {
  await useHandleData(
    stopFoodCouponUser,
    { id: params.id },
    (params.status === 3 ? "启用" : "停用") + `【${params.couponName}】礼券`
  );
  proTable.value?.getTableList();
};

const grantDialogRef = ref<InstanceType<typeof GrantDialog> | null>(null);
const openDialog = (title: string, row: Partial<Coupon.ResFoodCouponUserList> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api:
      title === "新增"
        ? createFoodCouponUser
        : title === "编辑"
        ? editFoodCouponUser
        : title === "批量新增"
        ? createBatchFoodCouponUser
        : undefined,
    getTableList: proTable.value?.getTableList
  };
  grantDialogRef.value?.acceptParams(params);
};

onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList();
  }
});
</script>
